<template>
	<div>
		<mu-container>
			<mu-row gutter>
				<mu-col span="12" lg="4" sm="6">
					<mu-date-input icon="today" v-model="month" label="选择月份" @change="monthChange()" type="month" label-float
					 full-width></mu-date-input>
				</mu-col>
			</mu-row>
			<div v-if="code===200">
				<mu-container>
					<mu-chip style="margin-left: 10px;margin-top: 10px;" color="blue" v-for="(group,index) in groups" v-bind:key="index">
						<mu-avatar :size="32">
							<img :src="getPhotoUrl(group.key.photoUrl)" :onerror="errorImg">
						</mu-avatar>
						{{group.key.userName}}:{{group.value}}
					</mu-chip>
				</mu-container>
				<mu-paper :z-depth="1" class="demo-list-wrap" style="margin-top: 10px;">
					<mu-list textline="three-line">
						<div v-for="(item,index) in items" v-bind:key="index">
							<mu-list-item avatar :ripple="false" button>
								<mu-list-item-action>
									<mu-avatar>
										<img :src="getPhotoUrl(item.createdUser.photoUrl)" :onerror="errorImg">
									</mu-avatar>
								</mu-list-item-action>
								<mu-list-item-content>
									<mu-list-item-title>{{item.money}}---{{item.createdTime}}</mu-list-item-title>
									<mu-list-item-sub-title>
										<span style="color: rgba(0, 0, 0, .87)">{{item.createdUser.userName}} -</span> {{item.remarks}}
									</mu-list-item-sub-title>
								</mu-list-item-content>
								<mu-list-item-action v-if="item.createdUser.userName==user.userName" title="删除" @click="getDleteDialog(true,item.id)">
									<mu-icon value="delete"></mu-icon>
								</mu-list-item-action>
							</mu-list-item>
							<mu-divider></mu-divider>
						</div>
					</mu-list>

				</mu-paper>


				<mu-flex justify-content="center" style="margin-top: 10px;">
					<mu-pagination raised circle :total="total" :page-size="pageSize" :current.sync="current"></mu-pagination>
				</mu-flex>
			</div>
			<div v-else="code=204" style="text-align: center;">
				<img src="../assets/null.png" /><br />
				<span>空空如也</span>
			</div>
		</mu-container>
		<mu-dialog title="提示" width="600" max-width="80%" :esc-press-close="false" :overlay-close="false" :open.sync="deleteDialog">
			确定要删除这条信息？
			<mu-button slot="actions" flat color="primary" @click="deleteById()">确定</mu-button>
			<mu-button slot="actions" flat @click="getDleteDialog(false,null)">取消</mu-button>
		</mu-dialog>
	</div>


</template>

<script>
	export default {
		name: 'HelloWorld',
		data() {
			return {
				month: new Date(),
				current: 1,
				total: 0,
				pageSize: 10,
				items: [],
				list: [],
				groups: [],
				errorImg: 'this.src="' + require('../assets/default.png') + '"',
				user: '',
				code: 0,
				deleteDialog: false,
				id: ''

			}
		},
		mounted() {
			this.user = JSON.parse(localStorage.getItem('user'));
			this.findData(0);
		},
		methods: {
			monthChange() {
				this.findData(0);
			},
			findData(pageNo) {
				var time = this.month.getFullYear();
				if (this.month.getMonth() + 1 < 10) {
					time += '0' + (this.month.getMonth() + 1);
				} else {
					time += ''+ (this.month.getMonth() + 1);
				}
				console.log(time)
				let self = this;
				this.$ajax.get("/bill/pageList", {
						params: {
							pageNo: pageNo,
							time: time
						}
					})
					.then(function(res) {
						self.code = res.data.code;
						if (self.code == 200) {
							self.items = res.data.data.list.content;
							self.total = res.data.data.list.numberOfElements;
							self.pageSize = res.data.data.list.size;
							self.current = res.data.data.list.number + 1;
							self.groups = res.data.data.group;
						} else if (self.code == 204) {} else {
							self.$toast.error(res.data.content);

						}
					})
					.catch(function(err) {
						console.log(err);

					});
			},
			deleteById() {
				let self = this;
				self.$ajax({
						method: "post",
						url: "/bill/deleteBill/" + this.id
					})
					.then(function(res) {
						if (res.data.code == 200) {
							self.$toast.success('删除成功');
							self.findData(0);
						} else {
							self.clear();
							self.$toast.error(res.data.content);

						}
					})
					.catch(function(err) {
						console.log(err);
						self.clear();

					});
				this.getDleteDialog(false, null);
			},
			getDleteDialog(deleteDialog, id) {
				this.deleteDialog = deleteDialog;
				this.id = id;
			},
			getPhotoUrl(photoUrl){
				if(photoUrl===null || photoUrl===undefined || photoUrl===''){
					return '';
				}
				return this.$ajax.defaults.baseURL + '/user/showPhoto/' + photoUrl;
			}

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
